//设备开关页面
import React, { Component } from "react";
import "./equipmentSwitch.scss";
import { Switch, Cell } from "zarm";
class Header extends Component {
  render() {
    return (
      <div className="header">
        <img src={this.props.img} alt="" />
        <span>{this.props.title}</span>
      </div>
    );
  }
}
export default class EquipmentSwitch extends Component {
  state = {
    ht: false, //话筒
    tyy: false, //投影仪
    dmthy: false, //多媒体会议
    dmtytsb: false, //多媒体一体设备
    yjp: false, //76寸液晶屏
  };
  componentDidMount() {
    window.document.title = "设备列表";
  }
  setChecked = (select, e) => {
    if (select === "ht") {
      this.setState({ ht: e });
    }
    if (select === "tyy") {
      this.setState({ tyy: e });
    }
    if (select === "dmthy") {
      this.setState({ dmthy: e });
    }
    if (select === "dmtytsb") {
      this.setState({ dmtytsb: e });
    }
    if (select === "yjp") {
      this.setState({ yjp: e });
    }
  };
  render() {
    const { ht, tyy, dmthy, dmtytsb, yjp } = this.state;
    return (
      <div className="equipment">
        <Cell
          title={
            <Header
              img={require("../../img/设备1.png").default}
              title="M1 话筒"
            />
          }
          description={
            <Switch checked={ht} onChange={(e) => this.setChecked("ht", e)} />
          }
        />
        <Cell
          title={
            <Header
              img={require("../../img/设备2.png").default}
              title="投影仪"
            />
          }
          description={<Switch checked={tyy} onChange={(e) => this.setChecked("tyy", e)} />}
        />
        <Cell
          title={
            <Header
              img={require("../../img/设备3.png").default}
              title="多媒体会议"
            />
          }
          description={<Switch checked={dmthy} onChange={(e) => this.setChecked("dmthy", e)} />}
        />
        <Cell
          title={
            <Header
              img={require("../../img/设备4.png").default}
              title="多媒体一体设备"
            />
          }
          description={<Switch checked={dmtytsb} onChange={(e) => this.setChecked("dmtytsb", e)} />}
        />
        <Cell
          title={
            <Header
              img={require("../../img/设备5.png").default}
              title="76寸液晶屏"
            />
          }
          description={<Switch checked={yjp} onChange={(e) => this.setChecked("yjp", e)} />}
        />
      </div>
    );
  }
}
